// 表单项
import { MyIcon } from '@/components/MyIcon';
import UploadSingle from '@/components/UploadSingle';
import { DatePicker, Input, InputNumber, Select } from 'antd';
import styles from '../index.less';
interface Props {
  item: GeneratorModel.FormItem;
  onChange?: (value: string) => void;
}

export default function FormItem(props: Props) {
  const { item } = props;
  const switchFormItem = (type: number) => {
    switch (type) {
      case 1:
        return <Input />;

      case 2:
        return <InputNumber style={{ width: '100%' }} />;

      case 3:
        return <Input.TextArea />;

      case 4:
        return <DatePicker />;

      case 5: //下拉单选
        if (item.options !== '') {
          const options = item.options?.replace(/，/g, ',');

          const optionArray = options?.split(',');

          const selectData = optionArray?.map((item) => {
            return { value: item, label: item };
          });

          return <Select placeholder="请选择" style={{ width: '100%' }} options={selectData} />;
        } else {
          return <Select placeholder="请选择" style={{ width: '100%' }} options={[]} />;
        }

      case 10: //图片上传
        return (
          <UploadSingle
            initValue=""
            change={(e) => {
              console.log(e);
            }}
          />
        );

      default:
        return <Input />;
    }
  };
  return (
    <div>
      <div className={styles.idText}>
        <span>{item.fieldName}</span>
      </div>
      <div className={styles.inputValue}>
        <div className={styles.moduleLabel}>
          {item.isNull === 1 ? <MyIcon type="icon-bitian" /> : ''}
          <span>{item.name}</span>
        </div>
        <div className={styles.moduleValue}>{switchFormItem(item.type)}</div>
      </div>
    </div>
  );
}
